import React from 'react';
import * as MyDrawerPage from './createDrawerComponents/index';
import { Drawer, Row, Col, Form, Input, Button, Select, Icon,Switch, Tabs} from 'antd';
import style from '../index.css';

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const TabPane = Tabs.TabPane;
const ContainerList = ({ form, container, closeDrawer, createGroupPort, deleteGroupPort, image, submitForm,environmentProps,network}) => {
  const { getFieldDecorator } = form;
  const inputLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 18 },
  };
  const envProps = {
    ...environmentProps,
    form:form,
  };
  const getPortLayoutTool = (item) => {
    if (item === portFormLen[portFormLen.length - 1]) {
      return (
        <Col span={4}>
          <Button htmlType={'button'} onClick={createGroupPort}>
            新增
          </Button>
        </Col>
      );
    } else if (portFormLen.length > 1) {
      return (
        <Col span={4}>
          <a key={item} onClick={() => {
            deleteGroupPort(item);
          }}>
            <Icon type="minus-circle" style={{ fontSize: 25, marginTop: 5 }}/>
          </a>
        </Col>
      );
    }
  };
  const portFormLen = container.formPortList;
  let indexKeys = 0;
  for (let i in portFormLen) {
    // 获取第一个数组下标
    indexKeys = i;
    break;
  }
  const portList = portFormLen.map(item => {
    return (
      <Row key={item}>
        <Col span={inputLayout.labelCol.span}>
          {portFormLen[indexKeys] === item ? <label className={style['label-title']}>端口映射：</label> : ''}
        </Col>
        <Col span={10}>
          <Row>
            <Col span={24}>
              <Col span={11}>
                <FormItem
                >
                  {getFieldDecorator(`port[${item}]['export']`, {
                    initialValue: '',
                  })(
                    <Input type="text" placeholder="外部端口"/>,
                  )}
                </FormItem>
              </Col>
              <Col span={11} offset={1}>
                <FormItem
                >
                  {getFieldDecorator(`port[${item}]['port']`, {
                    initialValue: '',
                  })(
                    <Input type="text" placeholder="内部端口"/>,
                  )}
                </FormItem>
              </Col>
            </Col>
          </Row>
        </Col>
        {getPortLayoutTool(item)}
      </Row>
    );
  });
  const getImageTools = () => {
    let types = form.getFieldValue('image');
    if (types === 'dockerhub') {
      return (
        <div>
          <Col span={8} offset={1}>
            <FormItem>
              {getFieldDecorator('url', {
                rules: [{
                  required: true,
                }],
              })(
                <Input type="text" placeholder="docker hub url"/>,
              )}
            </FormItem>
          </Col>
          <Col span={3} offset={1}>
            <Button type="primary">
              部署
            </Button>
          </Col>
        </div>
      );
    } else if (types === 'dockerfile') {
      return (
        <div>
          <Col span={8} offset={1}>
            <FormItem>
              {getFieldDecorator('url')(
                <Input type="text" placeholder="DockerFile url"/>,
              )}
            </FormItem>
          </Col>
          <Col span={3} offset={1}>
            <Button type="primary">
              部署
            </Button>
          </Col>
        </div>
      );
    }
  };

  const getImageOption = (data) => {
    return data.map(item => {
      return (
        <Option value={item.RepoTags.toString()} key={item.Id}>{item.RepoTags}</Option>
      );
    });
  };
  const imageOption = getImageOption(image);

  const networkProps = {
    form,
    networkList:network.networkList,
    container:container.container
  };
  return (
    <Drawer
      width="70%"
      closable={true}
      visible={container.visibleCreate}
      title="Create Container"
      onClose={closeDrawer}
    >
      <Form
        onSubmit={(e) => {
          e.preventDefault();
          form.validateFields((err, values) => {
            if (!err) {
              // 提交表单
              submitForm(values);
            }
          });

        }}
      >
        <Row>
          <FormItem
            label="name"
            {...inputLayout}
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true,
              }],
            })(
              <Input placeholder="container name"/>,
            )}
          </FormItem>
        </Row>
        {portList}
        <Row>
          <Col span={inputLayout.labelCol.span}>
            <label className={style['label-title']}>
              Image：
            </label>
          </Col>
          <Col span={6}>
            <FormItem
            >
              {getFieldDecorator('image', {
                rules: [{
                  required: true,
                }],
              })(
                <Select
                  showSearch
                  style={{ width: '100%' }}
                >
                  <Option value="dockerhub">docker hub</Option>
                  {imageOption}
                </Select>,
              )}
            </FormItem>
          </Col>
          {getImageTools()}
        </Row>
        <Row>
          <FormItem
            label="TTY"
            {...inputLayout}
          >
            {getFieldDecorator('tty', {
            })(
              <Switch />
            )}
          </FormItem>
        </Row>
        <Row style={{paddingBottom:30}}>

          <Col offset={inputLayout.labelCol.span}>
            <Tabs defaultActiveKey="1">
              <TabPane tab={<span><Icon type="code" />Enviroment</span>} key={1}>
                <MyDrawerPage.Environment {...envProps} />
              </TabPane>
              <TabPane tab={<span><Icon type="deployment-unit" />Network</span>} key={2}>
                <MyDrawerPage.Network {...networkProps} />
              </TabPane>
              {/*<TabPane tab={<span><Icon type="deployment-unit" />Volumes</span>} key={3}>*/}
                {/*<MyDrawerPage.Network {...networkProps} />*/}
              {/*</TabPane>*/}
              {/*<TabPane tab={<span><Icon type="deployment-unit" />Command</span>} key={4}>*/}
                {/*<MyDrawerPage.Network {...networkProps} />*/}
              {/*</TabPane>*/}
              {/*<TabPane tab={<span><Icon type="deployment-unit" />Capabilities</span>} key={5}>*/}
                {/*<MyDrawerPage.Network {...networkProps} />*/}
              {/*</TabPane>*/}
            </Tabs>
          </Col>
        </Row>
        <div
          className={style['drawer-button-box']}
        >
          <Button
            style={{
              marginRight: 8,
            }}
            onClick={closeDrawer}
            htmlType="button">
            Cancel
          </Button>
          <Button type="primary" htmlType="submit"
          >
            Submit
          </Button>
        </div>
      </Form>

    </Drawer>

  );
};
export default Form.create()(ContainerList);
